<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 400px;
				height: 600px;
				background: rgb(204,204,204);
				margin: 0 auto;
				position: relative;
			}
			#shijian{
				font-size: 20px;
				position: absolute;
				left: 20px;
				top: 20px;
			}
			#geshu{
				font-size: 20px;
				position: absolute;
				right: 0;
				top: 20px;
				right: 20px;
			}
			#start{
				width: 60px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
				position: absolute;
				top: 100px;
				left: 155px;
				background: green;
			}
			#main{
				width: 350px;
				height: 400px;
				position: absolute;
				top: 150px;
				left: 25px;
			}
			#img{
				width: 300px;
				height: 300px;
				position: absolute;
				top: 60px;
				left: 25px;
			}
			#box img{
				margin-right: 5px;
				margin-bottom: 5px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div id="shijian">
				游戏时间：60.00
			</div>
			<div id="geshu">
				个数：0
			</div>
			<div id="start">
				开始
			</div>
			<div id="main">
				<img src="img/1.png" id="img"/>
			</div>
		</div>
	</body>
		<script type="text/javascript">
			var shijian = document.getElementById("shijian");
			var geshu = document.getElementById("geshu");
			var start = document.getElementById("start");
			var main = document.getElementById("main");
			//点击开始
			start.onclick = function(){
				//倒计时开始
				timeOut();
				start.style.display = "none";
				main.innerHTML = "";
				tupian();
			}
			//倒计时的函数
			var shijian1 = 60.00;
			function timeOut(){
				var timer = setInterval(function(){
					shijian1 -=0.01;
					//取两位小数
					shijian1 = shijian1.toFixed(2);
					if(shijian1 <= 0.00){
						//游戏时间
						clearInterval(timer);
						alert("游戏结束")
					}
					shijian.innerHTML = "游戏时间：" + shijian1; 
				},10)
			}
			//新的图片
			var scoreHH = 0;
			var temp = 1;
			function tupian(){
				temp++;
				//计算需要创建的图片的数量
				var imgNum = Math.pow(temp,2);
				//计算每张图片的宽度
				var imgWidth = (main.clientWidth-(temp+1)*5)/temp;
				for(var i = 0;i < imgNum;i++){
					var imgOne = document.createElement("img");
					imgOne.style.width = imgWidth + "px";
//					imgOne.style.height = imgWidth + "px";
					imgOne.src = "images/1.png";
					main.appendChild(imgOne);
				}
				//随机找一个变成房祖名
				var allChild = main.children;
				//随机数
				var index = parseInt(Math.random()*allChild.length);
				allChild[index].src = "img/2.png";
				//点击它，点击事件
				allChild[index].onclick = function(){
					main.innerHTML = "";
					scoreHH += 10;
					geshu.innerHTML = "个数：" + scoreHH;
					tupian();
				}
				
			}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</script>
</html>